<template>
	<view class="box">
		<u-toast ref="uToast" />
		
		<view class="title">欢迎登录<text>U2</text></view>
		
		<view class="input-item">
			<my-input :placeholder="'请输入用户名'" 
				:focus="true"
				:value="username"
				@val="setUsername"
				:message="uMsg">
				<u-icon name="account" size="45"></u-icon>
			</my-input>
			<my-input :password="true" 
				:placeholder="'请输入密码'" 
				:value="password"
				@val="setPassword"
				:message="pMsg"> 
				<u-icon name="lock" size="45"></u-icon>
			</my-input>
		</view>
		
		<view class="btn-item">
			<my-button @click.native="doLogin">登录</my-button>
		</view>
		
		<view class="operation">
			<view>忘记<text @click="toPage('/pages/resetting/resetting')">密码</text>?</view>
			<view>注册<text @click="toPage('/pages/register/register')">账号</text></view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		computed:{
			...mapState('user', ['username', 'password', 'uMsg', 'pMsg'])
		},
		methods: {
			...mapMutations('user', ['setUsername', 'setPassword']),
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			showToast(obj) {
				this.$refs.uToast.show(obj)
			},
			doLogin() {
				this.$store.dispatch('user/login').then((flag) => {
					switch(flag.status) {
						case 0 : 					
							this.showToast({
								title: '登录成功',
								type: 'success',
								duration: 1000,
								url: '/pages/home/home',
								isTab: true
							})
						
							uni.setStorage({
								key: 'user',
								data: flag.user
							})
						break
						case 1 :
							this.showToast({
								title: '登录失败',
								type: 'error'
							})
						break
					}
				})
			}
		},
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	
	.title{
		margin-bottom: 50rpx;
		padding-top: 150rpx;
		font-size: 30px;
		font-weight: 700;
		text-align: center;
	}
	
	.title text{
		padding-left: 10rpx;
		color: #00b386;
	}
	
	.input-item{
		width: 100%;
	}
	
	.btn-item{
		padding: 50rpx 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
/* 	.login-button{
		width: 600rpx;
		font-size: 17px;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background-color: #00B386;
		border-radius: 10px;
	} */
	
	.operation{
		padding: 35px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.operation text{
		color: #00B386;
	}
	
	.floot{
		
	}
</style>
